<template>
    <div class="join">
        <div class="title">
            <img @click="go_back" class="fan_hui" src="../lmx/image/return.png" alt="">
            <span>已参加</span>
        </div>
        <div ref="content" class="content">
            <div class="main">
                <div class="one_hang" v-for="(item,index) in class_list" :key="index">
                    <img class="tu" :src="item.url" alt="">
                    <span class="zi">{{item.zi}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
var class_list = [
    {
        url:new URL ('../lmx/image/11.jpeg',import.meta.url).href,
        zi:'云云云云云云云云云云云云云云云云云云'
    },
    {
        url:new URL ('../lmx/image/22.jpg',import.meta.url).href,
        zi:'云云云云云云云云云云云云云云云云云云'
    },
    {
        url:new URL ('../lmx/image/33.jpeg',import.meta.url).href,
        zi:'云云云云云云云云云云云云云云云云云云'
    },
]
function go_back(){
    router.go(-1)
}
//计算滚动高度
const content = ref()
onMounted (()=>{
    var h = document.documentElement.clientHeight || document.body.clientHeight
    var vdaH = h -40 +'px'
    var boxTwo = content.value
    boxTwo.style.height = vdaH
    // console.log(vdaH)
})
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
.join {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    width: 100%;
    height: 40px;
    /* background-color: blue; */
    position: relative;
    margin: 0 auto;
}
.fan_hui{
    width:25px ;
    height: 25px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    margin-left: 5px;
}
.title>span{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10.4px;
    margin-left: -24px;
}
.content {
    width: 95%;
    /* flex: 1; */
    /* background-color: aqua; */
    overflow: scroll;
}
.main{
    width: 100%;
    height:180%;
    display: flex;
    flex-direction: column;
}
.one_hang{
    width: 100%;
    height: 100px;
    /* background-color: blueviolet; */
    margin-top: 10px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}
.tu{
    width: 160px;
    height: 100%;
    /* background-color: blanchedalmond; */
}
.zi{
    width: 160px;
    height: 100%;
    margin-left: 14px;
    border-bottom: 1px solid #dcdee0;
    /* background-color: blue; */
}
</style>